<template>
  <div class="p-16px tables" v-loading="loadingList">
    <div>
      <el-input
        v-model="tableData.extra.keyword"
        :placeholder="$t('home.agent.userNo')"
        size="large"
        style="width: 200px"
        clearable
        @input="search"
      />
    </div>
    <div class="m-t20px w-100%">
      <div>
        <el-table :data="tableData.lists" height="calc(100vh - 200px)" style="width: 100%" size="large">
          <el-table-column :label="$t('home.agent.orderNumber')" prop="orderNumber" />
          <el-table-column :label="$t('home.agent.userNo')" prop="userNo" />
          <el-table-column :label="$t('home.agent.express')" prop="expressNumber" />
          <el-table-column :label="$t('home.agent.price')" prop="productPrice" />
          <el-table-column :label="$t('home.agent.service')" prop="serviceFee" />
          <el-table-column :label="$t('home.agent.weight')" prop="weight" />
          <el-table-column :label="$t('home.agent.freight')" prop="freight" />
          <el-table-column :label="$t('home.agent.status')">
            <template #default="scope">
              {{ showAgentType(scope.row.status) }}
            </template>
          </el-table-column>

          <el-table-column :label="$t('home.list.act')" width="250">
            <template #default="scope">
              <div v-if="scope.row.status == 0">
                <el-button @click="confirm(scope.row)">{{ $t('home.agent.pay') }}</el-button>
              </div>
              <div class="m-t10px" v-if="scope.row.status == 40">
                <el-button @click="confirm(scope.row)">
                  {{ $t('home.agent.pickup') }}
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="m-t20px">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="tableData.meta.total"
          :page-size="tableData.meta.size"
          @current-change="changePage"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      @close="dialogVisible = false"
      :title="$t('common.tip')"
      width="500"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <div class="large">
        <h1 v-if="current.status == 40">{{ t('home.agent.pickup') }} {{ fee(current) }} cym</h1>
        <h1 v-if="current.status == 0">{{ t('home.agent.pay') }} {{ fee(current) }} cym</h1>
        <div v-if="fee(current) > 0">
          <el-radio-group v-model="payWay">
            <el-radio :value="0" size="large" border>{{ t('home.order.cash') }}</el-radio>
            <el-radio :value="50" size="large" border>Terminal</el-radio>
            <el-radio :value="51" size="large" border>Payme</el-radio>
            <el-radio :value="52" size="large" border>Uzum</el-radio>
            <el-radio :value="53" size="large" border>Click</el-radio>
            <el-radio :value="54" size="large" border>Alif</el-radio>
            <el-radio :value="55" size="large" border>Card</el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
          <el-button :loading="store.loading" type="primary" @click="editOrder">{{ t('common.sure') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useList } from '~/utils/page'
import { debounce } from 'lodash-es'

const { t } = useI18n()
const store = useAppStore()

const { tableData, getList, loadingList, changePage, handleSizeChange } = useList(apis.api.employeeAgentOrderPage, false)
tableData.extra.type = cache.getShop().id

const dialogVisible = ref(false)
const payWay = ref(undefined)
const current = ref<ApiAgentOrder>({} as ApiAgentOrder)

onMounted(() => {
  getList()
})

const fee = (order: ApiAgentOrder) => {
  let fee = 0
  if (order.status == 0 || order.status == 40) {
    if (order.status == 0) {
      fee = order.productPrice! + order.serviceFee
      if (order.payType == 1) {
        fee = fee + order.freight!
      }
    } else {
      if (order.payType == 0) {
        fee = order.freight!
      }
    }
  }
  return fee
}

// 创建防抖函数
const search = debounce(() => {
  getList()
}, 500)

onBeforeUnmount(() => {
  search.cancel()
})

const confirm = (order: ApiAgentOrder) => {
  current.value = order
  payWay.value = undefined
  dialogVisible.value = true
}

const editOrder = () => {
  const price = fee(current.value)
  if (price > 0 && payWay.value == undefined) {
    ElMessage.error(t('home.agent.payWayChoose'))
    return
  }

  let params = { orderNumber: current.value.orderNumber }

  if (current.value.status == 0) {
    ;(params.status = 10), (params.productPayWay = payWay.value)
  } else if (current.value.status == 40) {
    ;(params.status = 100), (params.transportPayWay = payWay.value)
  }

  apis.api.employeeAgentEditOrder(params).then(() => {
    getList()
    dialogVisible.value = false
  })
}
</script>
<style lang="scss" scoped>
.tables {
  width: calc(100vw - 96px);
}
.large {
  :deep(.ep-radio) {
    margin-bottom: 20px;
  }
}
</style>
